<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="tab-body mb-10">
        <div class="tab-box">
          <!--          // 0待审核1通过2驳回3借出4归还 -->
          <!--          0待审核1通过2驳回3完成 -->
          <el-radio-group v-model="searchForm.status" size="small" @change="changeFn()">
            <el-radio-button :label="0">待处理</el-radio-button>
            <el-radio-button :label="1">已通过</el-radio-button>
            <el-radio-button :label="2">已驳回</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="search-list mb-10  d-flex a-items">
        <el-input v-model="searchForm.student_name" placeholder="学生姓名" size="small"
                  class="w-140 mr-10"></el-input>
        <div>
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </div>
        <div class="mr-10">
          <el-select v-model="searchForm.type" placeholder="请假类型" size="small">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in semesterList"
                       :key="index"></el-option>
          </el-select>
        </div>
        <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i class="el-icon-search"></i>搜索
        </el-button>
        <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        <downexcel type="resume" :option="searchForm"></downexcel>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              header-cell-class-name="table-text-c"
              style="width: 100%">
            <el-table-column
                prop="name"
                label="学生"
                width="120"
                align="center"
                :key="1">
              <template slot-scope="scope">
                {{ scope.row.student ? scope.row.student.name : '--' }}
              </template>
            </el-table-column>
            <el-table-column
                label="停学原因"
                align="center"
                :key="2">
              <template slot-scope="scope">
                {{ statusType.type[scope.row.type] }}
              </template>
            </el-table-column>
            <el-table-column
                label="学生体温"
                align="center"
                prop="temperature"
                :key="3">
              <template slot-scope="scope">
                {{ scope.row.temperature }}℃
              </template>
            </el-table-column>
            <el-table-column
                prop="remark"
                label="是否健康"
                align="center"
                :key="4">
              <template slot-scope="scope">
                {{ statusType.is_health[scope.row.is_health] }}
              </template>
            </el-table-column>
            <el-table-column
                prop="return_time"
                label="是否接种疫苗"
                align="center"
                :key="5">
              <template slot-scope="scope">
                {{ statusType.is_vaccin[scope.row.is_vaccin] }}
              </template>
            </el-table-column>
            <el-table-column
                label="14天内是否出境"
                align="center"
                :key="6">
              <template slot-scope="scope">
                {{ statusType.is_exit[scope.row.is_exit] }}
              </template>
            </el-table-column>
            <el-table-column
                label="14天内是否从高风险地区入厦"
                align="center"
                :key="7">
              <template slot-scope="scope">
                {{ statusType.student_is_local[scope.row.student_is_local] }}
              </template>
            </el-table-column>
            <el-table-column
                label="当前是否在厦门"
                align="center"
                :key="8">
              <template slot-scope="scope">
                {{ statusType.is_local[scope.row.is_local] }}
              </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="提交时间"
                align="center"
                :key="11">
            </el-table-column>
            <el-table-column
                label="状态"
                align="center"
                :key="12"
                v-if="searchForm.status">
              <template slot-scope="scope">
                <el-link type="success" v-if="searchForm.status==1">通过</el-link>
                <el-link type="danger" v-if="searchForm.status==2">驳回</el-link>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="110"
                :key="13">
              <template slot-scope="scope">
                <el-button plain type="primary" size="small" @click="resumeId=scope.row.id,resumeVisible=true">
                  查看详情
                </el-button>
<!--                <el-button type="primary" size="small" @click="examinBtn(0,scope.row.id)">-->
<!--                  通过-->
<!--                </el-button>-->
<!--                <el-button size="small" @click="examinBtn(1,scope.row.id)" class="ml-10">驳回-->
<!--                </el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <resumeDetail :visible.sync="resumeVisible" :resumeId="resumeId" @InitFn="InitFn"></resumeDetail>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import {resumeIndex, resumeExamine} from '@/api/admin/student_resume'
import resumeDetail from "./resumeDetail";
export default {
  components: {resumeDetail},
  data() {
    return {
      resumeId: 11,
      resumeVisible: false,
      studentPhoto: [],
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        name: '', // 	整型 	必填 	1 	- 	名称
      },
      iframeSrc: '',
      previewVisible: '',
      number: null,
      searchForm: {
        student_name: '',
        class_id: '',
        section_id: '',
        status: 0,
        type: ''
      },
      semesterList: [
        {
          id: 1,
          name: '病假'
        },
        {
          id: 2,
          name: '事假'
        }
      ],
      statusType: {
        type: {1: '病假', 2: '事假'}, // 	整型 	必填 	1 	- 	0病假1事假
        is_health: {1: '是', 0: '否'}, // 	整型 	必填 	1 	- 	是否健康
        is_vaccin: {1: '是', 0: '否'}, // 	整型 	必填 	1 	- 	是否疫苗
        is_exit: {1: '是', 0: '否'}, // 	整型 	必填 	1 	- 	是否外地进入
        student_is_local: {1: '是', 0: '否'}, // 	整型 	必填 	1 	- 	14天内是否出省
        is_local: {1: '是', 0: '否'} // 	整型 	必填 	1 	- 	是否在厦门
      },
      studentPhotoIndex: 0,
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      // status 0 待审核 1 通过 2 驳回
      let dataOption = this.getJson(this.searchForm)
      dataOption.p = this.page.pageindex;
      resumeIndex(dataOption).then(res => {
        for (let item of res.list.data) {
          item.create_time = item.create_time.split(' ')[0]
          if (item.health_code) {
            item.health_code = `${item.health_code}`
          }
          if (item.qr_code) {
            let a = item.qr_code.split(',')
            let b = []
            for (let item_img of a) {
              b.push(`${item_img}`)
            }
            item.qr_code = this.getJson(b)
          }
        }
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // 预览图片
    fileFn(type, index, line) {
      if (type === 'health') {
        this.studentPhotoIndex = 0
        this.studentPhoto = this.getJson([this.arryList[index].health_code])
      } else {
        this.studentPhotoIndex = line;
        this.studentPhoto = this.getJson(this.arryList[index].qr_code)
      }
      console.log(111)
      this.$refs.imgPrive.click()
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    examinBtn(type, id) {
      let that = this;
      if (type === 0) {
        this.$confirm('确认复学的审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.subimitExamin(type, id)
        }).catch(() => {

        });
      } else {
        this.$prompt('输入驳回说明', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          // value
          that.subimitExamin(type, id, value)
        }).catch(() => {

        });
      }
    },
    changeFn() {
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    subimitExamin(type, id, value) {
      let n = this;
      // 0 通过 1 驳回
      let option = {id: id, type: type}
      if (type === 1) {
        option.content = value;
      }
      resumeExamine(option).then(res => {
        console.log('res:', res)
        if (res.code === 0) {
          n.InitFn()
        } else {
        }
      })
    },
    showFileFn(fileSrc) {
      this.iframeSrc = fileSrc;
      this.previewVisible = true;
    },
    // 搜索组件
    searchFn(option) {
      if (option === 'refresh') {
        this.searchForm.student_name = '';
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower;
        this.searchForm.class_id = '';
        this.searchForm.section_id = '';
        this.searchForm.type = '';
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    }
  },
  mounted() {
  },
  // 缓存机制 end
}
</script>

<style scoped>

.wx-user-box-line img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.wx-user-box-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-wx {
  cursor: pointer;
  padding: 5px;
}

.btn-wx:hover {
  color: #1b8de5;
  text-decoration: underline;
}

.delet-wx {
  color: red;
  cursor: pointer;
}

.delet-wx:hover {
  text-decoration: underline;
}

.tab-body {
  display: flex;
  align-items: center;
}

.tab-box {
  flex: 1;
}

.tab-box-list {
  display: flex;
  align-items: center;
}

.examinBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: red;
}

.examinBtn i {
  font-style: normal;
  color: #1b8de5;
  cursor: pointer;
  font-size: 12px;
}

.img-box-list {
  width: 50px;
  height: auto;
}
</style>
